<template>
  <div class="page">
    <div class="container">
      <pub-search
        v-model:searchColumns="state.searchColumns"
        v-model:searchForm="state.searchForm"
        mask-append-to="table-container"
        @search="getPageData"
      >
        <template #leftBtn>
          <el-button
            type="primary"
            class="btn-table-add"
            :icon="Plus"
            @click="add"
          >
            新增
          </el-button>
        </template>
      </pub-search>
      <div class="table-container">
        <pub-table
          ref="pubTable"
          :column="columns"
          :data="tableData"
          :loading="tableLoading"
        >
          <template v-slot:option="scope">
            <el-button
              type="success"
              class="btn-row-edit"
              plain
              @click="edit(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </pub-table>
        <pub-pagination
          :total="total"
          v-model:page="state.searchForm.pageNum"
          v-model:limit="state.searchForm.pageSize"
          @pagination="getPageData"
        />
      </div>
    </div>
    <pub-dialog
      v-if="editShow"
      :title="isAdd ? '新增参数' : '编辑参数'"
      v-model:visible="editShow"
      width="1000px"
    >
      <!-- <dialog-content :item="selectedItem" @cancel="editShow = false"> -->
      <div class="edit-form edit-dialog">
        <el-form slot ref="formRef" :model="formdata.form">
          <el-descriptions
            :column="2"
            border
            :colon="true"
            label-class-name="custom-description-label-160"
          >
            <el-descriptions-item>
              <template #label>
                <span class="colorRed">*</span>
                名称
              </template>
              <el-form-item prop="name" :rules="$formRules.input">
                <el-input v-model="formdata.form.name" placeholder="请输入" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="colorRed">*</span>
                代码
              </template>
              <el-form-item prop="code" :rules="$formRules.input">
                <el-input v-model="formdata.form.code" placeholder="请输入" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template #label>
                <span class="colorRed">*</span>
                值
              </template>
              <el-form-item prop="value" :rules="$formRules.input">
                <el-input v-model="formdata.form.value" placeholder="请输入" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template #label>
                备注
              </template>
              <el-form-item>
                <el-input
                  v-model="formdata.form.remark"
                  type="textarea"
                  maxlength="200"
                  show-word-limit
                  placeholder="请输入"
                />
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div class="btn-group">
          <el-button class="btn-form-close" @click="editShow = false">
            取消
          </el-button>
          <el-button
            class="btn-form-save"
            type="primary"
            @click="submit(formRef)"
          >
            保存
          </el-button>
        </div>
      </div>
      <!-- </dialog-content> -->
    </pub-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  addSysparam,
  editSysparam,
  getSysparamList,
  getSysparamInfo,
  getSysparamCode
} from '@/api/system'
import { ref, reactive, toRefs, onMounted } from 'vue'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'

const tableData = ref([])
const formRef = ref({})
const tableLoading = ref(false)
const editShow = ref(false)
const isAdd = ref(false)
const state = reactive({
  searchForm: {
    pageSize: 15,
    pageNum: 1
  },
  searchColumns: [
    {
      label: '单位名称',
      el: 'Input',
      bind: 'orgName',
      defaultValue: '',
      labelWidth: 80
    }
  ]
})
const formdata = reactive({
  form: {}
})
const total = ref(0)
const columns = ref([
  /*
   * label:表格对应的列名
   * prop: 列对应的字段名
   * type:1.format:前端format 字典放到/utils/constants.js里面
   *      2.formatDict: 后端字典format 传字典对应的formatCode
   *      3.option 操纵栏
   */
  { label: '名称', prop: 'name' },
  { label: '代码', prop: 'code' },
  { label: '值', prop: 'value' },
  { label: '操作', type: 'option', width: '100' }
])

const getPageData = () => {
  tableLoading.value = true
  getSysparamList(state.searchForm).then(res => {
    tableLoading.value = false
    tableData.value = res.data
    total.value = res.total
  })
}
// 点击查询按钮搜索
const search = () => {
  state.searchForm.pageNum = 1
  getPageData()
}
const add = () => {
  isAdd.value = true
  formdata.form = {
    code: '',
    name: '',
    value: '',
    remark: ''
  }
  editShow.value = true
}
const edit = item => {
  isAdd.value = false
  formdata.form = JSON.parse(JSON.stringify(item))
  editShow.value = true
}
const submit = formRef => {
  let urlParams = editSysparam
  if (isAdd.value) {
    urlParams = addSysparam
  }
  formRef
    .validate(valid => {
      if (valid) {
        urlParams(formdata.form).then(res => {
          if (res.succeed) {
            ElMessage({
              type: 'success',
              message: res.msg
            })
            editShow.value = false
            getPageData()
          }
        })
      }
    })
    .catch(() => {})
}

onMounted(() => {
  getPageData()
})
</script>

<style lang="scss" scoped>
.table-container {
  height: calc(100% - 90px);
}
</style>
